<template>
  <div>
    <van-nav-bar title="注册" class="navbar"> 
      <template #left> <router-link to="/login" class="text">返回</router-link></template>
      <template #right>登录</template>
    </van-nav-bar>

    <van-panel>
       <van-field
        v-model="user_name"
        type="tel"
        label="用户名"
        placeholder="请输入4~6位数字或字母用户名"
        @blur.native.capture="checkUser_name"
        :right-icon="UserName"
      />
        <van-field
        v-model="nickname"
        type="tel"
        label="昵称"
        placeholder="请输入2-16位中文昵称"
        @blur.native.capture="checknickname"
        :right-icon="Nickname"
      />
      <van-field
        v-model="tel"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
        @blur.native.capture="checkUser"
        :right-icon="user"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入6位数密码"
        class="shuru"
        @blur.native.capture="checkPwd"
        :right-icon="pwd"
      />
      <van-field
        v-model="checkpassword"
        type="password"
        label="确认密码"
        placeholder="请再次输入密码"
        class="shuru"
        @blur.native.capture="checksRePwd"
        :right-icon="Repwdstate"
      />
      <van-button color="#0aa1ed" size="large" @click="checkFrom"
        >注册</van-button
      >
    </van-panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      user: "",
      pwd: "",
      password: "",
      checkpassword: "",
      Repwdstate: "",
      nickname:'',
      Nickname:'',
      user_name:'',
      UserName:''
    };
  },

  methods: {
    checkUser_name(){
      let exp =/^[a-zA-Z0-9]{4,6}$/;     
      if (exp.test(this.user_name)) {
        console.log("验证通过");
        this.UserName = "passed";
        return true;
      } else {
        console.log("用户名验证失败");
        this.UserName = "close";
        return false;
      }


    },
checknickname(){
 let exp =/^([\u4e00-\u9fa5]{2,8})$/;
 
        
      if (exp.test(this.nickname)) {
        console.log("验证通过");
        this.Nickname = "passed";
        return true;
      } else {
        console.log("用户名验证失败");
        this.Nickname = "close";
        return false;
      }


},
    checkUser() {
      let exp =
        /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      if (exp.test(this.tel)) {
        console.log("验证通过");
        this.user = "passed";
        return true;
      } else {
        console.log("用户名验证失败");
        this.user = "close";
        return false;
      }
    },

    checkPwd() {
      // 验证密码是6位数字
      let exp = /^\d{6}$/;
      if (exp.test(this.password)) {
        //  console.log('通过...')
        this.pwd = "passed";
        return true;
      } else {
        this.pwd = "close";
        return false;
      }
    },
    checksRePwd() {
      //确认密码一致验证
      let exp = /^\d{6}$/;
      if (exp.test(this.checkpassword) && this.password == this.checkpassword) {
        this.Repwdstate = "passed";

        return true;
      } else {
        this.Repwdstate = "close";
        return false;
      }
    },
    checkFrom() {
      //当点击提交按钮时执行
      if (this.checkUser() && this.checkPwd() && this.checksRePwd()&&this.checknickname()&&this.checkUser_name()) {
        this.axios.post('/register',`uname=${this.user_name}&upwd=${this.password}&phone=${this.tel}&user_name=${this.nickname}`).then(res=>{
          if(res.data.code==200){
                this.$toast({message:'注册成功，跳转登录。。。'})
               this.$router.push('/login')
          }
        })
    
      } else {
        console.log("验证失败");
      }
    },
  },
};
</script>
<style src="../assets/css/main.css"></style>

<style scoped>
.shuru {
  margin: 10px 0;
}
.text{
  color: black;
}
</style>
